import React from "react";
import { Input, Tabs, Select, Card, List, Typography, Image } from "antd";
import "./index.less";

const { Title, Text } = Typography;
const { TabPane } = Tabs;
const { Option } = Select;
const { Search } = Input;

const ProjectSearch: React.FC = () => {
  const projects = [
    {
      title: "Alipay",
      cover:
        "https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png",
      description: "那是一种内在的东西，他们到达不了，也无法触及的",
      updateTime: "几秒前",
    },
    {
      title: "Angular",
      cover:
        "https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png",
      description: "希望是一个好东西，也许是最好的，好东西是不会消亡的",
      updateTime: "2 小时前",
    },
  ];

  return (
    <div className="project-search-page" data-oid="2mlu183">
      <div className="header" data-oid="xubbbso">
        <Title level={2} data-oid="0cd5wm.">
          搜索列表（项目）
        </Title>
        <Search
          placeholder="请输入"
          enterButton="搜索"
          size="large"
          style={{ width: 300 }}
          data-oid=".:aksm2"
        />
      </div>

      <Tabs defaultActiveKey="project" data-oid="ossrg1j">
        <TabPane tab="文章" key="article" data-oid="7pgjpwd" />
        <TabPane tab="项目" key="project" data-oid=":6vsr_m" />
        <TabPane tab="应用" key="application" data-oid="pu:26-n" />
      </Tabs>

      <Card className="filter-panel" data-oid="hsaz.iu">
        <div className="filter-row" data-oid="g9_qeoc">
          <Text data-oid="vevvmqh">所属类目：</Text>
          <Select defaultValue="全部" style={{ width: 120 }} data-oid="2wh5r57">
            <Option value="全部" data-oid="c2vat24">
              全部
            </Option>
            <Option value="类目1" data-oid="a5x.4gp">
              类目1
            </Option>
            <Option value="类目2" data-oid="sxt_dfw">
              类目2
            </Option>
          </Select>
        </div>
        <div className="filter-row" data-oid="ze0as7k">
          <Text data-oid="k_6b-p8">其它选项：</Text>
          <Select defaultValue="不限" style={{ width: 120 }} data-oid="0qhvhxe">
            <Option value="不限" data-oid="knlhnav">
              不限
            </Option>
          </Select>
          <Text data-oid="kzw42n0">好评度：</Text>
          <Select defaultValue="不限" style={{ width: 120 }} data-oid="_y26dr2">
            <Option value="不限" data-oid="7c9pr4:">
              不限
            </Option>
          </Select>
        </div>
      </Card>

      <List
        className="project-list"
        grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 4, xxl: 4 }}
        dataSource={projects}
        renderItem={(item) => (
          <List.Item data-oid="car8aks">
            <Card hoverable className="project-card" data-oid="fvpjnr3">
              <Image
                alt={item.title}
                src={item.cover}
                className="project-cover"
                data-oid="cz261g4"
              />

              <Title level={4} className="project-title" data-oid="fpp7fmv">
                {item.title}
              </Title>
              <Text className="project-description" data-oid="mx0uhvg">
                {item.description}
              </Text>
              <Text className="project-time" data-oid="5eja52p">
                {item.updateTime}
              </Text>
            </Card>
          </List.Item>
        )}
        data-oid="lq-:4hw"
      />
    </div>
  );
};

export default ProjectSearch;
